<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/assets/home/css/mui.min.css"  />
    <link rel="stylesheet" href="/assets/home/css/animate.min.css" />
    <link rel="stylesheet" href="/assets/home/css/reset.css"  />
    <link rel="stylesheet" href="/assets/home/css/coupon_list.css" />
    <title>优惠券</title>
    <script src="/assets/home/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/home/js/mui.min.js"></script>
    <script src="/assets/home/js/wow.min.js"></script>

    <link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
    <script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>
</head>
<body>
    <div class="coupon_tabs">
        <ul>
            <li class="active">全部</li>
            <li>未使用</li>
            <li>已使用</li>
            <li>未生效</li>
            <li>已失效</li>
        </ul>
    </div>

    <div class="coupon_list">
    </div>
</body>
</html>
<script>
    option = 0
    setListData(option)
    $('ul li').click(function()
    {
        $(this).parent().children().prop('class','')
        $(this).prop('class','active')
        $(this).parent().children().each((i,element) => {
            if(element===this){
                $('.coupon_list').empty()
                option = i
            }
        });
        setListData()
    })

    function setListData(){
        $.post('/home/discount/coupon_bus',{'option':option})
        .then((data)=>{
            html = ''
            if(!Array.isArray(data)){
                data = Object.values(data);
            }
            for(var coupon of data){
                // console.log(coupon.id,coupon.status.code?(coupon.statusTime.msg):(coupon.status.msg))
                html += `<div class="coupon_item wow" data-wow-delay="100ms">
                <div class="item_content">
                    <a href="/home/discount/coupon_info?id=${coupon.id}">
                        <div class="left">
                            ${coupon.rate*100}<span>折</span>
                        </div>
                        <div class="right">
                            <div>${coupon.title}</div>
                            <div>活动开始时间：${coupon.createDate}</div>
                            <div>活动结束时间：${coupon.endDate}</div>
                            <div>领取时间：${coupon.collectionTime}</div>
                        </div>
                    </a>
                </div> 
            </div>`
            }
            $('.coupon_list').append(html)
        })
    }
    
    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: '#box' // 可选滚动容器选择器，否则使用窗口
    }).init();
</script>